import {
    Button,
    Input,
    Form,
    Radio,
    Upload,
    Modal,
} from 'antd';
import { LeftCircleTwoTone,PlusOutlined} from '@ant-design/icons';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const { TextArea } = Input;


function Publish(props) {

    //上传图片
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');
    const [fileList, setFileList] = useState([
    ]);
    const handleCancel = () => setPreviewOpen(false);
    const handlePreview = async (file) => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
    };
    const handleChange = ({ fileList: newFileList }) => setFileList(newFileList);
    const uploadButton = (
        <div>
            <PlusOutlined />
            <div
                style={{
                    marginTop: 8,
                }}
            >
                添加图片
            </div>
        </div>
    );

    const navigate = useNavigate()
    
    // 单选框改变触发，获取对应值
    const handRadioChange = (e) => {
        console.log(e.target.value)
        let name = e.target.getAttribute('data-name')
        setRadioValues({ ...radioValues, [data - name]: e.target.value })
    }

    //发布相册左边的按钮或者取消按钮触发，回退到发布相册管理页面
    const handleBack = () => {
        navigate(-1)
    }

    const handlePublish = () => {
       
    }
    return (
        <div className='voteInput'>
            <div className='topNav'>
                <div><LeftCircleTwoTone onClick={handleBack} style={{ fontSize: '20px', cursor: 'pointer' }} /><span>发布相册</span></div>
                <div>
                    <Button type='default' onClick={handleBack}>取消</Button>
                    <Button type='primary' onClick={handlePublish}>发布</Button>
                </div>
            </div>
            <div className='voteform'>
                <Form name='voteForm'>
                   
                    <Form.Item
                        label="发布范围:"
                        name="type"
                        rules={[{ required: true }]}
                    >
                      
                       <Radio.Group onChange={handRadioChange} data-name="type">
                            <Radio value={1}>全校</Radio>
                            <Radio value={2}>全部班级</Radio>
                            <Radio value={3}>全部教师</Radio>
                            <Radio value={4}>指定班级/教师组</Radio>
                        </Radio.Group>
                       
                    </Form.Item>
                
                    <Form.Item
                        label="内容:"
                        name="content"
                        rules={[{ required: true }]}
                    >
                        <TextArea rows={4} placeholder="写下精彩瞬间" />
                        </Form.Item>
                   {/* 上传图片 */}
            <Upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                fileList={fileList}
                onPreview={handlePreview}
                onChange={handleChange}
            >
                {fileList.length >= 8 ? null : uploadButton}
            </Upload>
            <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
                <img
                    alt="example"
                    style={{
                        width: '100%',
                    }}
                    src={previewImage}
                />
            </Modal>
            <span>最多上传12张图片,支持jpg,png,bmp格式,大小不能超过5MB</span>
       
                </Form>
            </div>
        </div>
    );
}

export default Publish;